<script setup>

</script>
<!--  文章详情页(帖子详情页)  http://localhost:9090/detail  -->
<template>
  <div style="width: 1200px; margin: 0 auto">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :span="18">
        <el-card>
          <h1 style="color:orange;text-align: center">蔓越莓绿豆糕，味道还不错值得一试!</h1>
          <p>作者：XX姐|发布时间：2024/2/2 15:20|阅读次数：1100</p>
          <el-divider></el-divider>
          <el-card>
            <b style="color:#0aa1ed">摘要：</b>
            蔓越莓绿豆糕，好吃到爆。隔壁小孩都被馋哭了
          </el-card>
          <p style="height: 500px">
            车子的内部配置方面同样能满足众多年轻人的需求，入门级别的都有8英寸的中控屏幕，如果是其他版本的话，中控屏幕尺寸为12.3英寸的。标配的功能有多功能方向盘，以及皮质方向盘，给人的感觉高级感满满，1.5T动力的全部都是电子挡把换挡，只有1.4T的为机械挡把换挡。相信在了解了这一款车子以后，大家也会觉得车子特别便宜，具有很高的实用性。
            再来介绍一下东风日产劲客，之所以使用这款车子与第一款车子对比，也是因为这款车子同样属于小型SUV，而且两款车子的价格相差不多，这款车子指导价格为8.98万至10.38万。通过优惠1.7万元以后，入门车子仅需7.98万元。车子有着时尚的外观，车身颜色也有很多种，可以选择既有纯色的也有两种颜色组合的，年轻人可根据自身的喜好来选择。
            比较注重动力的，该车子虽然并没有搭载1.5T的发动机，不过1.5L 122马力L4的发动机，依旧能够满足日常使用匹配的为模拟6档的CVT无级变速箱，在车速方面能达到每小时170公里，车身结构属于5门5座SUV，长宽高尺寸分别为4312mm、1760mm和1613mm。通过这样的车身尺寸以及2620mm的轴距，就可知道这款车子的尺寸还算是比较宽敞的，综合油耗为百公里6.59L。
            车子在外观方面全部匹配LED远近灯光源，日常使用的时候还有大灯延时关闭以及可调的大灯高度，除了低配版本的，并没有电动天窗，其他两个车子全部都有这样的功能。标配车窗防夹手功能以及速度感应式雨刷，再加上后雨刷，都能满足日常行车的需求。
            进入车内以后中控屏幕尺寸为七英寸以及八英寸的，虽然尺寸并不是很大，但是与整个车子匹配起来的话，依旧显得非常高级。年轻人如果也想要选择小型SUV，以上介绍的这两款车子，在各方面都是非常不错的选择，最主要的就是在价格方面能满足大家的需求。好了本期就给大家分享到这里，我们下期再见吧。
            图片来自网络，如有侵权请联系删除
          </p>
        </el-card>
        <!--  评论  -->
        <el-card style="margin-top:10px">
          <p>发一条友善的评论</p>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="22">
              <el-input placeholder="请输入评论内容"/>
            </el-col>
            <el-col :span="2">
              <el-button type="primary">发布</el-button>
            </el-col>
          </el-row>
          <!--  评论列表  -->
          <el-row style="margin-top: 10px" v-for="item in 4">
            <el-col :span="2"><el-avatar src="/imgs/head.jpg"></el-avatar></el-col>
            <el-col :span="22" style="text-align: left">
              <span style="font-weight:bold;color: orange">传奇哥：</span>
              <p style="margin: 5px 0">看起来很好吃</p>
              <span style="font-size:12px;color:#666">2024/02/02</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="6">
        <el-card>
          <div id="head_div"></div>
          <div style="text-align: center;position: relative;top:-50px">
            <img src="/imgs/head.jpg"
                    style="border: 5px solid white; border-radius: 90px; width:90px;height:90px" alt="">
            <p>传奇哥</p>
            <i class="el-icon-edit">文本作者</i><br/>
            <i class="el-icon-time">2023/9/2 10:10:01</i>
          </div>
        </el-card>
        <!--  作者其他文章  -->
        <el-card style="margin:10px 0">
          <h3>作者其他文章</h3>
          <el-divider></el-divider>
          <el-row :gutter="20" v-for="item  in 4">
            <el-col :span="10">
              <img src="/imgs/a.jpg" alt="" style="width: 100%;height: 70px" >
            </el-col>
            <el-col :span="14">
              <p style="margin: 0;height: 50px">枣泥面包好吃到爆!</p>
              <i class="el-cion-time">2023/9/2 10:10:50</i>
            </el-col>
          </el-row>
        </el-card>


        <!--  热门文章  -->
        <el-card style="margin:10px 0">
          <h3>热门文章</h3>
          <el-divider></el-divider>
          <el-row :gutter="20" v-for="item  in 4">
            <el-col :span="10">
              <img src="/imgs/a.jpg" alt="" style="width: 100%;height: 70px" >
            </el-col>
            <el-col :span="14">
              <p style="margin: 0;height: 50px">枣泥面包好吃到爆!</p>
              <i class="el-cion-time">2023/9/2 10:10:50</i>
            </el-col>
          </el-row>
        </el-card>


      </el-col>
    </el-row>
  </div>
</template>

<script>
export  default {
  name: "DetailView",
  data(){
    return {
      c:{},
      otherArr:[],
      hotArr:[],
      comment:{content:""},
      commentArr:[]
    }
  },
  methods:{
    postComment(){

    }
  }
}
</script>
<style scoped>
  #head_div{
    height: 90px;
    background-image: url("/public/imgs/avarbg.jpg");
  }
</style>